<template>
  <div class="dashboard-editor-container">
    <!-- <github-corner class="github-corner"  margin-top:12px;  /> -->

    <el-row style="width: 86.3%; top: 6px; z-index: 999; position: fixed">
      <el-col :span="4.5" class="card-box">
        <!-- <i class="el-icon-s-data" /><span style="font-weight:600;color:#666;margin-right: 450px;margin-left: 5px;">
          销售总览
        </span> -->
        <el-cascader
          class="region"
          v-model="value"
          placeholder="选择店铺分组"
          :clearable="false"
          :options="cascadeList"
          :props="{ checkStrictly: true }"
          @change="handleChange"
          style="width: 300px; height: 30px"
        >
        </el-cascader>
        <!-- <el-select
          v-model="productView"
          placeholder="产品视角"
          clearable
          @change="changeView"
          style="width: 100px; height: 30px; margin-left: 5px"
        >
          <el-option
            v-for="dict in dict.type.sys_product_item"
            :key="dict.value"
            :label="dict.label"
            :value="dict.label"
          />
        </el-select> -->
      </el-col>
      <el-col :span="12" style="background-color: #f5f5f5; height: 30px">
        <nav id="navbar">
          <ul>
            <li :class="{ active: isActiveSection(1) }">
              <a href="#section1" @click="scrollToSection(1)">销售总览</a>
            </li>
            <!-- <li :class="{ active: isActiveSection(2) }">
              <a href="#section2" @click="scrollToSection(2)">渠道销售</a>
            </li>-->
            <li :class="{ active: isActiveSection(3) }">
              <a href="#section3" @click="scrollToSection(3)">店铺销售</a>
            </li>
            <li :class="{ active: isActiveSection(4) }">
              <a href="#section4" @click="scrollToSection(4)">品类排行</a>
            </li>
            <li :class="{ active: isActiveSection(5) }">
              <a href="#section5" @click="scrollToSection(5)">库存总览</a>
            </li>

            <!-- <li :class="{ active: isActiveSection(6) }">
              <a href="#section6" @click="scrollToSection(6)">渠道库存</a>
            </li>
            <li :class="{ active: isActiveSection(7) }">
              <a href="#section7" @click="scrollToSection(7)">店铺库存</a>
            </li> -->
            <li :class="{ active: isActiveSection(8) }">
              <a href="#section8" @click="scrollToSection(8)">地区排行</a>
            </li>
          </ul>
        </nav>
      </el-col>
      <el-col :span="7">
        <date
          v-model="valueTime"
          :type.sync="groupType"
          @handleChangeTime="handleChangeTime($event)"
        ></date>
      </el-col>
      <!-- <timeSearch @getDateArr="getDateArr" @changDay="changDay" :timeArr="timeArr" :dayActive="this.dayActive"
        :dayLimit="1095" /> -->
    </el-row>

    <section id="section1">
      <el-row
        style="background: #fff; padding: 20px 16px 0; margin-bottom: 32px"
      >
        <h4
          style="
            font-weight: 600;
            color: #666;
            margin-left: 5px;
            margin-top: 25px;
          "
        >
          <i class="el-icon-s-data" style="margin-right: 5px" />{{
            value.join("/") + " "
          }}销售总览
        </h4>
        <panel-group
          @handleSetLineChartData="handleSetLineChartData"
          :biNumberOfItem="this.biNumberOfItem"
          :biNumberItem="this.biNumberItem"
        />
      </el-row>
      <!-- <line-chart :chart-data="lineChartData" /> -->
      <el-row
        style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
      >
        <chartData :chart-data="echartData" />
      </el-row>
    </section>
    <!-- margin-bottom: 32px-->
    <!-- <section id="section2">     
      <el-row :gutter="10" style="padding: 32px 0">
        <el-col :span="17">
          <el-card style="height: calc(100vh - 500px)">
            <div slot="header">
              <span style="font-weight: 600"
                ><i class="el-icon-collection"></i> 渠道销售排行榜</span
              >
            </div>
            <el-table
              :data="channelSaleTopList"
              :height="pageHeight"
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column
                label="排名"
                width="60"
                type="index"
              ></el-table-column>

              <el-table-column
                label="渠道"
                align="center"
                prop="channel"
                width="110"
              ></el-table-column>
              <el-table-column
                label="销售金额"
                align="center"
                prop="salesAmount"
                width="110"
              ></el-table-column>

              <el-table-column
                label="退款金额"
                align="center"
                prop="returnAmount"
                width="110"
              />
              <el-table-column
                label="净销售额"
                align="center"
                prop="netSalesAmount"
                width="110"
              ></el-table-column>

              <el-table-column
                label="综合退货率"
                align="center"
                prop="comprehensiveReturnRate"
              >
                <template slot-scope="scope">
                  <div v-show="scope.row.comprehensiveReturnRate">
                    {{ scope.row.comprehensiveReturnRate.toFixed(2) }}%
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                label="订单总数"
                align="center"
                prop="totalOrdersNumber"
              ></el-table-column>

              <el-table-column
                label="销售总件数"
                align="center"
                prop="totalSalesNumber"
              />
              <el-table-column
                label="销售净毛利"
                align="center"
                prop="salesGrossProfit"
              />
              <el-table-column
                label="客单价"
                align="center"
                prop="customerUnitPrice"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.customerUnitPrice.toFixed(2) }}</div>
                </template>
              </el-table-column>

              <el-table-column
                label="平均折扣率"
                align="center"
                prop="averageDiscountRateGoods"
              >
                <template slot-scope="scope">
                  <div>
                    {{ (scope.row.averageDiscountRateGoods * 100).toFixed(2) }}%
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="销售占比"
                align="center"
                prop="amountRatio"
              >
                <template slot-scope="scope">
                  <div>{{ (scope.row.amountRatio * 100).toFixed(2) }}%</div>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="7">
          <el-card>
            <div slot="header">
              <span style="font-weight: 600"
                ><i class="el-icon-pie-chart"></i> 渠道销售分析</span
              >
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <div ref="usedmemory" style="height: 380px" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>-->

    <section id="section3">
      <el-row :gutter="10" style="margin-top: 16px">
        <el-col :span="17">
          <!-- style="height: calc(100vh - 380px)" -->
          <el-card>
            <div
              slot="header"
              style="display: flex; justify-content: space-between"
            >
              <span style="font-weight: 600"
                ><i class="el-icon-collection"></i>
                {{ value[0] ? value[0] + " " : "" }}店铺销售排行榜</span
              >
              <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="shopSaleTopExport"
                >导出</el-button
              >
            </div>
            <el-table
              :data="shopSaleTopList"
              height="380"
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column
                label="排名"
                width="60"
                type="index"
              ></el-table-column>

              <el-table-column
                label="店铺"
                align="center"
                prop="shop"
                :show-overflow-tooltip="true"
                width="110"
              ></el-table-column>
              <el-table-column
                label="销售金额"
                align="center"
                prop="salesAmount"
                width="110"
              ></el-table-column>

              <el-table-column
                label="退款金额"
                align="center"
                prop="returnAmount"
                width="110"
              />
              <el-table-column
                label="净销售额"
                align="center"
                prop="netSalesAmount"
                width="110"
              ></el-table-column>

              <el-table-column
                label="综合退货率"
                align="center"
                prop="comprehensiveReturnRate"
              >
                <template slot-scope="scope">
                  <div v-show="scope.row.comprehensiveReturnRate">
                    {{ scope.row.comprehensiveReturnRate.toFixed(2) }}%
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                label="订单总数"
                align="center"
                prop="totalOrdersNumber"
              ></el-table-column>

              <el-table-column
                label="销售总件数"
                align="center"
                prop="totalSalesNumber"
              />
              <!-- <el-table-column
                label="销售毛利额"
                align="center"
                prop="salesGrossProfit"
              /> -->
              <el-table-column
                label="客单价"
                align="center"
                prop="customerUnitPrice"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.customerUnitPrice.toFixed(2) }}</div>
                </template>
              </el-table-column>

              <el-table-column
                label="平均折扣率"
                align="center"
                prop="averageDiscountRateGoods"
              >
                <template slot-scope="scope">
                  <div>
                    {{ (scope.row.averageDiscountRateGoods * 100).toFixed(2) }}%
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="销售占比"
                align="center"
                prop="amountRatio"
              >
                <template slot-scope="scope">
                  <div>{{ (scope.row.amountRatio * 100).toFixed(2) }}%</div>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="7">
          <el-card>
            <div slot="header">
              <span style="font-weight: 600"
                ><i class="el-icon-pie-chart"></i> 店铺销售分析</span
              >
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <div ref="commandstats" style="height: 380px" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <section id="section4">
      <!-- margin-bottom: 32px  -->
      <el-row :gutter="10" style="padding: 32px 0">
        <el-col :span="24">
          <!-- style="height: calc(100vh - 500px)"  style="display: flex; justify-content: space-between"-->
          <el-card>
            <div slot="header" class="card-box" style="height: 20px">
              <el-col :span="2">
                <span style="font-weight: 600"
                  ><i class="el-icon-collection"></i> 品类排行</span
                >
              </el-col>
              <el-col :span="17">
                <el-form
                  :model="queryParams"
                  ref="queryForm"
                  size="small"
                  :inline="true"
                  label-width="68px"
                >
                  <el-form-item label="" prop="brandName">
                    <el-select
                      v-model="queryParams.itemBrand"
                      placeholder="选择品牌"
                      clearable
                      filterable
                      style="width: 120px"
                    >
                      <el-option
                        v-for="dict in dict.type.sys_product_pp"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.label"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="颗粒度" prop="firstLevelList">
                    <el-select
                      v-model="productView"
                      placeholder="产品视角"
                      @change="changeView"
                      style="width: 100px; height: 30px; margin-left: 5px"
                    >
                      <el-option
                        v-for="dict in dict.type.sys_product_item"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.label"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="筛选条件" prop="firstLevelList">
                    <el-select
                      v-model="queryParams.firstLevelList"
                      placeholder="请选择一级类目"
                      multiple
                      clearable
                      style="width: 150px"
                    >
                      <el-option
                        v-for="dict in dict.type.sys_product_pl"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="" prop="secondLevelList">
                    <el-select
                      v-model="queryParams.secondLevelList"
                      placeholder="请选择二级类目"
                      multiple
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="dict in dict.type.sys_product_secondary"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="" prop="threeLevelList">
                    <!-- <el-input v-model="queryParams.secondSource" placeholder="请输入三级类目" clearable
          @keyup.enter.native="handleQuery" /> -->
                    <el-select
                      v-model="queryParams.threeLevelList"
                      placeholder="请选择三级类目"
                      multiple
                      clearable
                      filterable
                      style="width: 150px"
                    >
                      <el-option
                        v-for="dict in dict.type.sys_product_cycle"
                        :key="dict.label"
                        :label="dict.label"
                        :value="dict.label"
                      />
                    </el-select>
                  </el-form-item>

                  <el-form-item>
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      size="mini"
                      @click="changePage"
                      >搜索</el-button
                    >
                    <el-button
                      type="warning"
                      plain
                      icon="el-icon-download"
                      size="mini"
                      @click="handleExport"
                      >导出</el-button
                    >
                    <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            > -->
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="5">
                <exhaustionDay
                  @getDateArr="getDateArrRate"
                  @changDay="changDayRate"
                  :timeArr="timeArrRate"
                  :dayActive="this.dayActiveRate"
                  :dayLimit="1095"
                />
              </el-col>
            </div>
            <!-- :height="pageHeight" @cell-click="tableEdit"-->
            <el-table
              :data="ItemDateList"
              :height="itemHeight"
              highlight-current-row
              style="width: 100%"
              @cell-click="goodstableEdit"
            >
              <el-table-column
                width="50"
                label="排名"
                prop="serialNumber"
              ></el-table-column>
              <!-- <el-table-column
                width="110"
                label="图片地址"
                align="center"
                prop="picUrl"
                ><template slot-scope="scope">
                  <el-popover
                    effect="light"
                    trigger="click"
                    placement="left"
                    width="auto"
                    v-show="scope.row.picUrl"
                  >
                    <template #default>
                      <img
                        :src="pjtUrl + scope.row.picUrl"
                        style="width: 800px; height: 600px; object-fit: contain"
                      />
                    </template>
                    <template #reference>
                      <img
                        :src="pjtUrl + scope.row.picUrl"
                        style="width: 20px; height: 20px; object-fit: contain"
                      />
                    </template>
                  </el-popover>
                </template>
              </el-table-column> -->
              <el-table-column
                width="150"
                label="品类"
                align="center"
                prop="itemGrade"
              ></el-table-column>
              <el-table-column
                width="110"
                label="销售金额"
                align="center"
                prop="salesAmount"
              ></el-table-column>

              <el-table-column
                width="110"
                label="退款金额"
                align="center"
                prop="returnAmount"
              />
              <el-table-column
                width="110"
                label="净销售额"
                align="center"
                prop="netSalesAmount"
              ></el-table-column>

              <el-table-column
                width="110"
                label="综合退货率"
                align="center"
                prop="comprehensiveReturnRate"
              >
                <template slot-scope="scope">
                  <div>
                    {{ (scope.row.comprehensiveReturnRate * 100).toFixed(2) }}%
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                width="110"
                label="总销售件数"
                align="center"
                prop="totalSalesNumber"
              ></el-table-column>

              <el-table-column
                width="110"
                label="净销售件数"
                align="center"
                prop="netSalesNumber"
              />
              <!-- <el-table-column
                width="110"
                label="毛利额"
                align="center"
                prop="grossProfit"
              />
              <el-table-column
                width="110"
                label="毛利率"
                align="center"
                prop="grossProfitRate"
              >
                <template slot-scope="scope">
                  <div>{{ (scope.row.grossProfitRate * 100).toFixed(2) }}%</div>
                </template>
              </el-table-column> -->
              <el-table-column
                width="110"
                label="发货前退货数"
                align="center"
                prop="returnBeforeShipmentNumber"
              />
              <el-table-column
                width="110"
                label="发货后退货数"
                align="center"
                prop="returnAfterShipmentNumber"
              />
              <el-table-column
                width="110"
                label="总退货件数"
                align="center"
                prop="totalReturnNumber"
              />
              <el-table-column
                width="110"
                label="库存"
                align="center"
                prop="endingInventory"
              />
              <el-table-column
                width="110"
                label="采购在途"
                align="center"
                prop="salesGrossProfit"
              />
              <el-table-column
                width="110"
                label="SD单件数"
                align="center"
                prop="sdNumber"
              />
              <el-table-column
                width="110"
                label="MJX单件数"
                align="center"
                prop="mjxNumber"
              />
              <el-table-column
                width="100"
                label="可售天数"
                align="center"
                prop="saleDays"
              />
              <el-table-column
                width="110"
                label="售罄率"
                align="center"
                prop="exhaustionRate"
              >
                <template slot-scope="scope">
                  <div>{{ (scope.row.exhaustionRate * 100).toFixed(2) }}%</div>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="changePage"
            />
            <!-- <el-row
              style="
                background: #f0f2f5;
                padding: 20px 16px 0;
                margin: 50px -20px;
              "
            >
              <PanelGroupII
                @handleSetItemChartData="handleSetItemChartData"
                :itemData="itemData"
              />
            </el-row> -->
            <el-row
              :gutter="20"
              class="data_section"
              style="margin-bottom: 30px"
            >
              <el-col :span="24">
                <!-- <div class="addBtn" @click="addLibraryIdList">
            <div class="el-icon-plus">新增条件</div>
          </div> -->
                <el-row
                  :gutter="20"
                  class="data_section"
                  style="margin-top: 30px"
                >
                  <el-col :span="21">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="addLibraryIdList"
                      >新增</el-button
                    >
                    <el-button
                      type="primary"
                      size="mini"
                      @click="selectFirstStatisticsEchartsII"
                      >查询</el-button
                    >
                  </el-col>
                  <el-col :span="3">
                    <!-- <span style="font-weight: 600">{{ itemType }}</span> -->
                    <el-select
                      v-model="queryParams.property"
                      placeholder="品类属性"
                      filterable
                      @change="selectFirstStatisticsEchartsII"
                    >
                      <el-option
                        v-for="item in itemType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
                <el-form ref="form" :model="formData" label-position="top">
                  <div>
                    <!-- <div class="module-table-name mb15">
          <span>基础条件选择</span>
        </div> 
       
      -->
                    <div
                      class="flex_row"
                      style="display: flex; flex-direction: row"
                    >
                      <div
                        v-for="(item, index) in formData.libraryIdList"
                        :key="index"
                        class="fx_5"
                      >
                        <el-form-item
                          style="display: flex; flex-direction: row"
                        >
                          <el-select
                            v-model="item.id"
                            placeholder="品类展示"
                            filterable
                            @change="keywordListlength"
                            allow-create
                            default-first-option
                            remote
                            :remote-method="getselectKeyWordList"
                          >
                            <!--
                         width="100"
                        :popper-append-to-body="false"
                         remote
                      :remote-method="getselectKeyWordList" -->
                            <!-- <div>
                        
                      </div> -->
                            <!--allow-create
                      default-first-option
                         @blur="blurInput($event)" -->
                            <!-- <el-input
                        v-model="item.id"
                        placeholder="请输入"
                      ></el-input> -->
                            <el-option
                              v-for="libraryItem in libraryOptions"
                              :key="libraryItem"
                              :label="libraryItem"
                              :value="libraryItem"
                            >
                            </el-option>
                          </el-select>

                          <span
                            v-if="formData.libraryIdList.length > 1"
                            @click="delRow(item, index)"
                          >
                            <el-button
                              type="danger"
                              size="mini"
                              class="el-icon-delete"
                            ></el-button>
                          </span>
                          <span
                            v-if="index !== formData.libraryIdList.length - 1"
                          >
                            VS
                          </span>
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                </el-form>
              </el-col>
            </el-row>
            <el-row
              style="
                background: #fff;
                padding: 16px 16px 0;
                margin-bottom: 32px;
              "
            >
              <div
                style="margin-left: 2px; margin-right: 2px; height: 460px"
                ref="echarts"
              ></div>
            </el-row>
            <div
              style="
                display: flex;
                justify-content: space-between;
                margin: 10px 0;
              "
            >
              <span style="font-weight: 600"
                ><i class="el-icon-collection"></i>
                {{ value.join("/") + " " }}价格分布</span
              >
              <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                >导出</el-button
              >
            </div>
            <el-row>
              <el-col :span="24">
                <el-table
                  :data="ItemDateList"
                  :height="itemHeight"
                  highlight-current-row
                  style="width: 100%"
                  @cell-click="pricetableEdit"
                >
                  <el-table-column
                    width="50"
                    label="排名"
                    prop="serialNumber"
                  ></el-table-column>

                  <el-table-column
                    width="150"
                    label="品类"
                    align="center"
                    prop="itemGrade"
                  ></el-table-column>

                  <el-table-column
                    width="170"
                    label="100以下"
                    align="center"
                    prop="firstPriceRangeNum"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.firstPriceRangeNum }}
                        (
                        {{
                          (scope.row.firstPriceRangeNumRate * 100).toFixed(2)
                        }}% )
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="170"
                    label="[100,150)"
                    align="center"
                    prop="secondPriceRangeNum"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.secondPriceRangeNum }}
                        (
                        {{
                          (scope.row.secondPriceRangeNumRate * 100).toFixed(2)
                        }}% )
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="170"
                    label="[150,200)"
                    align="center"
                    prop="thirdPriceRangeNum"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.thirdPriceRangeNum }}
                        (
                        {{
                          (scope.row.thirdPriceRangeNumRate * 100).toFixed(2)
                        }}% )
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="170"
                    label="[200,250)"
                    align="center"
                    prop="fourthPriceRangeNum"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.fourthPriceRangeNum }}
                        (
                        {{
                          (scope.row.fourthPriceRangeNumRate * 100).toFixed(2)
                        }}% )
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="170"
                    label="[250,300)"
                    align="center"
                    prop="fifthPriceRangeNum"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.fifthPriceRangeNum }}
                        (
                        {{
                          (scope.row.fifthPriceRangeNumRate * 100).toFixed(2)
                        }}% )
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="170"
                    label="[300,350)"
                    align="center"
                    prop="sixthPriceRangeNum"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.sixthPriceRangeNum }}
                        (
                        {{
                          (scope.row.sixthPriceRangeNumRate * 100).toFixed(2)
                        }}% )
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column
                    width="170"
                    label="[350,400)"
                    align="center"
                    prop="seventhPriceRangeNum"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.seventhPriceRangeNum }}
                        (
                        {{
                          (scope.row.seventhPriceRangeNumRate * 100).toFixed(2)
                        }}% )
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="170"
                    label="400以上"
                    align="center"
                    prop="eighthPriceRangeNum"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.eighthPriceRangeNum }}
                        (
                        {{
                          (scope.row.eighthPriceRangeNumRate * 100).toFixed(2)
                        }}% )
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination
                  v-show="total > 0"
                  :total="total"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="changePage"
                />
              </el-col>
              <!-- <el-col :xs="24" :sm="24" :lg="7">
                <div class="chart-wrapper">
                  <chartDataRaddar />
                  
                  <ve-radar :data="radarData" :settings="radarSet"></ve-radar>
                </div>
              </el-col> -->
            </el-row>
            <!-- padding: 16px 16px 0; -->
            <el-row
              style="
                background: #fff;

                margin-bottom: 32px;
              "
            >
              <div
                style="margin-left: 2px; margin-right: 2px; height: 460px"
                ref="Raddar"
              ></div>
            </el-row>
          </el-card>
        </el-col>
        <!-- <el-col :span="5">
          <el-card>
            <div slot="header">
              <span><i class="el-icon-pie-chart"></i> 渠道排行分析</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <div ref="usedmemory" style="height: 380px" />
            </div>
          </el-card>
        </el-col> -->
      </el-row>
    </section>

    <section id="section5">
      <el-row
        style="background: #fff; padding: 20px 16px 0; margin-bottom: 32px"
      >
        <h4
          style="
            font-weight: 600;
            color: #666;
            margin-left: 5px;
            margin-top: 25px;
          "
        >
          <i class="el-icon-s-data" style="margin-right: 5px" />{{
            value.join("/") + " "
          }}库存总览
        </h4>
        <panel-group-i
          @handleSetLineSkuData="handleSetLineSkuData"
          :biNumberOfItem="this.biNumberOfItem"
          :biNumberSku="this.biNumberSku"
        />
      </el-row>
      <!-- <line-chart :chart-data="lineChartData" /> -->
      <el-row
        style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
      >
        <chartDataI :echartDataSku="echartDataSku" />
      </el-row>
    </section>

    <!-- <section id="section6">
      <el-row :gutter="10" style="padding: 32px 0">
        <el-col :span="17">
          <el-card style="height: calc(100vh - 500px)">
            <div slot="header">
              <span style="font-weight: 600"
                ><i class="el-icon-collection"></i> 渠道库存排行</span
              >
            </div>
            <el-table
              :data="channelInventoryTopList"
              :height="pageHeight"
              highlight-current-row
              style="width: 100%"
              @cell-click="channelInventorytableEdit"
            >
              <el-table-column
                label="排名"
                width="50"
                type="index"
              ></el-table-column>

              <el-table-column
                label="渠道"
                align="center"
                prop="channel"
                width="110"
              ></el-table-column>

              <el-table-column
                width="105"
                label="库存总金额"
                align="center"
                prop="totalStockAmount"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.totalStockAmount.toFixed(2) }}</div>
                </template>
              </el-table-column>
              <el-table-column
                width="120"
                label="产品库存总金额"
                align="center"
                prop="productStockAmount"
              >
              </el-table-column>
              <el-table-column
                width="120"
                label="配件库存总金额"
                align="center"
                prop="accessoriesStockAmount"
              ></el-table-column>
              <el-table-column
                width="100"
                label="总库存"
                align="center"
                prop="totalStock"
              ></el-table-column>
              <el-table-column
                label="产品库存"
                align="center"
                prop="productStock"
                width="100"
              ></el-table-column>

              <el-table-column
                label="配件库存"
                align="center"
                prop="accessoriesStock"
                width="100"
              />
              <el-table-column
                width="110"
                label="库存周转率"
                align="center"
                prop="totalStockRotationRate"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.totalStockRotationRate.toFixed(2) }}</div>
                </template>
              </el-table-column>

              <el-table-column
                width="120"
                label="产品库存周转率"
                align="center"
                prop="productStockRotationRate"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.productStockRotationRate.toFixed(2) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                width="120"
                label="配件库存周转率"
                align="center"
                prop="accessoriesStockRotationRate"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.accessoriesStockRotationRate.toFixed(2) }}
                  </div>
                </template>
              </el-table-column>

            </el-table>
          </el-card>
        </el-col>
        <el-col :span="7">
          <el-card>
            <div slot="header">
              <span style="font-weight: 600"
                ><i class="el-icon-pie-chart"></i> 渠道库存分析</span
              >
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <div ref="totalStock" style="height: 380px" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <section id="section7">     
      <el-row :gutter="10" style="padding: 32px 0">
        <el-col :span="17">
          <el-card style="height: calc(100vh - 500px)">
            <div slot="header">
              <span style="font-weight: 600"
                ><i class="el-icon-collection"></i> 店铺库存排行</span
              >
            </div>
            <el-table
              :data="shopInventoryTopList"
              :height="pageHeight"
              highlight-current-row
              style="width: 100%"
              @cell-click="shopInventorytableEdit"
            >
              <el-table-column
                label="排名"
                width="50"
                type="index"
              ></el-table-column>

              <el-table-column
                label="店铺"
                align="center"
                prop="shop"
                :show-overflow-tooltip="true"
                width="110"
              ></el-table-column>

              <el-table-column
                width="105"
                label="库存总金额"
                align="center"
                prop="totalStockAmount"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.totalStockAmount.toFixed(2) }}</div>
                </template>
              </el-table-column>
              <el-table-column
                width="120"
                label="产品库存总金额"
                align="center"
                prop="productStockAmount"
              >
              </el-table-column>
              <el-table-column
                width="120"
                label="配件库存总金额"
                align="center"
                prop="accessoriesStockAmount"
              ></el-table-column>
              <el-table-column
                width="100"
                label="总库存"
                align="center"
                prop="totalStock"
              ></el-table-column>
              <el-table-column
                label="产品库存"
                align="center"
                prop="productStock"
                width="100"
              ></el-table-column>

              <el-table-column
                label="配件库存"
                align="center"
                prop="accessoriesStock"
                width="100"
              />
              <el-table-column
                width="110"
                label="库存周转率"
                align="center"
                prop="totalStockRotationRate"
              >
              </el-table-column>

              <el-table-column
                width="120"
                label="产品库存周转率"
                align="center"
                prop="productStockRotationRate"
              />
              <el-table-column
                width="120"
                label="配件库存周转率"
                align="center"
                prop="accessoriesStockRotationRate"
              >
              </el-table-column>
             
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="7">
          <el-card>
            <div slot="header">
              <span style="font-weight: 600"
                ><i class="el-icon-pie-chart"></i> 店铺库存分析</span
              >
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <div ref="shoptotalStock" style="height: 380px" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section> -->

    <section id="section8">
      <el-row :gutter="10">
        <el-col :span="10">
          <el-card style="height: calc(100vh - 125px)">
            <div slot="header">
              <span style="font-weight: 600"
                ><i class="el-icon-collection"></i>
                {{ value.join("/") + " " }}销售地区Top20</span
              >
              <!-- <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-refresh-right"></el-button> -->
              <!-- @click="refreshCacheNames()" -->
            </div>
            <el-table
              :data="TopSallist"
              :height="tableHeight"
              highlight-current-row
              style="width: 100%"
            >
              <!--  @row-click="getCacheKeys" -->
              <el-table-column
                label="排名"
                width="50"
                type="index"
              ></el-table-column>

              <el-table-column
                label="省份"
                align="center"
                prop="province"
              ></el-table-column>

              <el-table-column label="城市" align="center" prop="city" />
              <el-table-column
                label="城市级别"
                align="center"
                prop="cityClass"
              />
              <el-table-column
                label="订单数"
                align="center"
                prop="orderCount"
              ></el-table-column>

              <el-table-column
                label="销售金额"
                align="center"
                prop="salesAmount"
              />

              <el-table-column
                label="销售占比"
                align="center"
                prop="amountRatio"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.amountRatio.toFixed(2) }}%</div>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>

        <el-col :span="14">
          <el-card style="height: calc(100vh - 125px)">
            <!-- <div
              id="MapChart"
              ref="MapChart"
              style="width: 1100px; height: 960px"
            ></div> -->
            <div ref="platform" style="width: 1100px; height: 960px"></div>
            <!-- <MixChart :mapData="mapData" /> -->
          </el-card>
        </el-col>
      </el-row>
    </section>

    <!--
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
      -->
    <!-- <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
    </el-row> -->

    <!-- <el-row :gutter="8">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
        <transaction-table />
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
        <todo-list />
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
        <box-card />
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import { getCache } from "@/api/monitor/cache";
// import echarts from "echarts";
import * as echarts from "echarts/lib/echarts.js";
require("echarts/extension/bmap/bmap");
import "echarts/map/js/china.js"; //引入中国地图数据
import city from "echarts/map/json/china-cities.json";
import date from "./day/date.vue";
import chartDataI from "./components/chartDataI";
import chartData from "./components/chartData";
import MixChart from "./Chart/MixChart.vue";
import timeSearch from "./day/day.vue";
import exhaustionDay from "./day/exhaustionDay.vue";

// import GithubCorner from '@/components/GithubCorner'
import PanelGroup from "./components/PanelGroup";
import PanelGroupI from "./components/PanelGroupI";
import PanelGroupII from "./components/PanelGroupII";
// import LineChart from './components/LineChart'
import chartDataRaddar from "./components/chartDataRaddar";
import RaddarChart from "./components/RaddarChart";
import PieChart from "./components/PieChart";
// import BarChart from './components/BarChart'
import { firstThreeScreenRank } from "@/api/sku/BiSkuSaleDwd";
import {
  numberOfItem,
  TopSaleProvince,
  synchroChannelData,
} from "@/api/chart/BiChannelSaleDwd";
import {
  selectChannelStatistics,
  selectSaleSingle,
  channelSaleTop,
  shopSaleTop,
  selectInventoryData,
  selectInvStatistics,
  getchannelInventoryTop,
  getshopInventoryTop,
  selectFirstStatistics,
  selectAllFirstThreeList,
} from "@/api/chart/SaleDwd";

import {
  listBrandChannelShop,
  listAll,
  listAllPermission,
} from "@/api/chart/brandChannelShop";
// import TransactionTable from './components/TransactionTable'
// import TodoList from './components/TodoList'
// import BoxCard from './components/BoxCard'
import {
  listBiKeywordDwd,
  getBiKeywordDwd,
  delBiKeywordDwd,
  addBiKeywordDwd,
  updateBiKeywordDwd,
  selectByConditionList,
  selectPartWordList,
  selectKeyWordStatistics,
  comparisonStatistics,
  selectKeyWordList,
} from "@/api/keyword/BiKeywordDwd";
const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145],
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130],
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130],
  },
};

export default {
  name: "Admin",
  dicts: [
    "sys_product_item",
    "sys_product_secondary",
    "sys_product_cycle",
    "sys_product_pl",
    "sys_product_pp",
  ],
  components: {
    chartDataRaddar,
    // GithubCorner,
    PanelGroup,
    PanelGroupI,
    PanelGroupII,
    // LineChart,

    // RaddarChart,
    PieChart,
    // BarChart,

    chartData,
    chartDataI,
    MixChart,
    // TransactionTable,
    // TodoList,
    // BoxCard
    timeSearch,
    exhaustionDay,
    date,
  },
  data() {
    return {
      dayActiveRate: 2,
      timeArrRate: [
        // { value: "1", label: "今天" },
        { value: "2", label: "售罄时间定义" },
        // { value: "7", label: "最近7天" },
        // { value: "30", label: "最近30天" },
      ],
      timeGapRate: { startSellOutDate: "", endSellOutDate: "" },
      //品类属性
      itemType: [
        { value: "salesAmount", label: "销售金额" },
        { value: "returnAmount", label: "退款金额" },
        // { value: "factory_order", label: "工厂订单" },
        // { value: "salesGrossProfit", label: "采购在途" },
        { value: "saleDays", label: "可售天数" },
        { value: "netSalesAmount", label: "净销售额" },
        { value: "totalSalesNumber", label: "总销售件数" },
        { value: "netSalesNumber", label: "净销售件数" },
        { value: "returnBeforeShipmentNumber", label: "发货前退货件数" },
        { value: "returnAfterShipmentNumber", label: "发货后退货件数" },
        { value: "totalReturnNumber", label: "总退货件数" },
        { value: "comprehensiveReturnRate", label: "综合退货率" },
        // { value: "grossProfit", label: "毛利额" },
        // { value: "grossProfitRate", label: "毛利率" },
        // { value: "endingInventory", label: "库存" },
        { value: "exhaustionRate", label: "售馨率" },
        { value: "sdNumber", label: "SD单件数" },
        { value: "mjxNumber", label: "MJX单件数" },
      ],
      //价格带
      list: [],
      //多选品类
      formData: {
        libraryIdList: [{ id: "" }],
      },
      libraryOptions: [
        // { value: "1", label: "库位1" },
        // { value: "2", label: "库位2" },
        // { value: "3", label: "库位3" },
        // { value: "4", label: "库位4" },
        // { value: "5", label: "库位5" },
        // { value: "6", label: "库位6" },
      ], // 库存名称列表
      //++++++++++++++++++  雷达图
      // radarSet: {
      //   labelMap: {
      //     firstPriceRangeNum: "100以下",
      //     secondPriceRangeNum: "[100,150)",
      //     thirdPriceRangeNum: "[150,200)",
      //     fourthPriceRangeNum: "[200,250)",
      //     fifthPriceRangeNum: "[250,300)",
      //     sixthPriceRangeNum: "[300,350)",
      //     seventhPriceRangeNum: "[350,400)",
      //     eighthPriceRangeNum: "400以上",
      //   },
      // },
      // radarData: {
      //   columns: [
      //     "itemGrade",
      //     "firstPriceRangeNum",
      //     "secondPriceRangeNum",
      //     "thirdPriceRangeNum",
      //     "fourthPriceRangeNum",
      //     "fifthPriceRangeNum",
      //     "sixthPriceRangeNum",
      //     "seventhPriceRangeNum",
      //     "eighthPriceRangeNum",
      //   ],
      //   rows: [],
      // },
      //雷达图
      echartDataRaddar: [],
      //总览数据
      itemData: {},
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        property: "salesAmount",
        firstLevelList: null,
        secondLevelList: null,
        threeLevelList: null,
      },
      //商品排行
      ItemDateList: [],
      //产品视角
      productView: "一级",
      //店铺SaleTop
      shopSaleTopList: [],
      //渠道SaleTop
      channelSaleTopList: [],
      //店铺库存Top
      shopInventoryTopList: [],
      //渠道库存Top
      channelInventoryTopList: [],
      // 统计店铺销售信息
      commandstats: null,
      //统计渠道销售信息
      usedmemory: null,
      // 统计店铺库存信息
      shoptotalStock: null,
      //统计渠道库存信息
      totalStock: null,
      //锚点
      sections: document.querySelectorAll("section"),
      activeSection: null,
      active: null,
      scrollTimer: null,
      //地区前20
      TopSallist: [],
      tableHeight: window.innerHeight - 175,
      pageHeight: window.innerHeight - 280,
      itemHeight: window.innerHeight - 680,
      shopListHeight: window.innerHeight - 570,
      //BI指标数据
      biNumberItem: [],
      biNumberSku: [],
      //时间控件
      timeObj: {},
      //客单价
      biNumberOfItem: "",

      //时间控件
      valueTime: new Date(new Date().setDate(new Date().getDate() - 1)),
      groupType: "date",

      highlighted: ["销售金额", "退款金额", "净销售额"], // 初始化时，前两个元素高亮

      //传递数据
      echartData: {
        columns: ["支付日期", "销售金额", "退款金额", "净销售额"],
        rows: [],
      },
      highlightedSku: ["库存总量", "产品库存", "配件库存"], // 初始化时，前两个元素高亮

      //Sku传递数据
      echartDataSku: {
        columns: ["支付日期", "库存总量", "产品库存", "配件库存"],
        rows: [],
      },
      //时间
      //
      dayActive: 365,
      timeArr: [
        { value: "2", label: "昨天" },
        { value: "7", label: "最近7天" },
        { value: "30", label: "日" },
        { value: "56", label: "周" },
        { value: "365", label: "月" },
        { value: "1", label: "自定义" },
      ],
      timeGap: { startTime: "", endTime: "" },
      // 店铺
      cascadeList: [],
      // , "天猫", "vfu运动旗舰店"
      value: [],
      loading: false,
      //店铺名称
      shopName: "",
      mapData: [],
      lineChartData: lineChartData.newVisitis,
    };
  },
  created() {
    this.getList();

    // this.handleChangeTime()
    /** 查询品牌渠道店铺关系列表 */
    this.getdataSourceList();
    // this.openLoading();
  },
  watch: {
    productView: {
      handler: function (newnew, oldold) {
        console.log(JSON.stringify(newnew));
        this.list = [];
        this.formData = {
          libraryIdList: [{ id: "" }],
        };
        //  this.chinaConfigure();
        // this.chinaConfigure();
        // this.$nextTick(() => {
        //   this.$refs.platform.echarts.resize();
        // });
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    window.addEventListener("scroll", this.startScrollTimer);
    // this.mapData = [
    //   { name: "石家庄", number: 102, count: 2457, good: 2313, bad: 144 },
    //   { name: "秦皇岛", number: 169, count: 1931, good: 1869, bad: 62 },
    //   { name: "唐山", number: 164, count: 1291, good: 1200, bad: 91 },
    //   { name: "保定", number: 157, count: 2142, good: 2098, bad: 44 },
    //   { name: "太原", number: 256, count: 2331, good: 2070, bad: 261 },
    //   { name: "大同", number: 128, count: 2699, good: 2556, bad: 143 },
    //   { name: "阳泉", number: 136, count: 1277, good: 1051, bad: 226 },
    //   { name: "呼和浩特", number: 138, count: 2108, good: 2085, bad: 23 },
    //   { name: "韶关", number: 266, count: 2734, good: 2609, bad: 125 },
    //   { name: "长沙", number: 133, count: 2938, good: 2746, bad: 192 },
    //   { name: "郴州", number: 252, count: 1604, good: 1306, bad: 298 },
    //   { name: "娄底", number: 270, count: 2885, good: 2639, bad: 246 },
    //   { name: "武汉", number: 211, count: 1121, good: 964, bad: 157 },
    //   { name: "黄石", number: 120, count: 2534, good: 2432, bad: 102 },
    //   { name: "十堰", number: 125, count: 1581, good: 1540, bad: 41 },
    //   { name: "荆州", number: 186, count: 2926, good: 2730, bad: 196 },
    //   { name: "郑州", number: 121, count: 1787, good: 1662, bad: 125 },
    // ];
    // console.log(JSON.stringify(this.TopSallist));

    // let param = {
    //     dataSource: this.value,
    //     startTime: this.dateFormat(this.timeObj.startTime),
    //     endTime: this.dateFormat(this.timeObj.endTime),
    //     dataType: this.groupType,
    //   };
    //   if (!param.endTime) {
    //     return;
    //   } else {
    //     // this.getechartChannelData(obj)
    //     // this.getnumberOfItem(param);
    //     this.getTopSal(param);
    //   }
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.startScrollTimer);
  },

  methods: {
    changDayRate(val) {
      this.dayActiveRate = val;
      this.timeGapRate.startSellOutDate = val[0];
      this.timeGapRate.endSellOutDate = val[1];
    },
    getDateArrRate(value) {
      this.timeGapRate.startSellOutDate = value[0];
      this.timeGapRate.endSellOutDate = value[1];
      console.log(JSON.stringify(this.timeGapRate));
      this.changePage();
    },
    //china地区排行前20
    chinaConfigure() {
      var _this = this;
      let myChart = echarts.init(this.$refs.platform); //这里是为了获得容器所在位置
      var geoCoordMap = {};
      var mapName = "china";
      myChart.showLoading();
      var mapFeatures = city.features;
      myChart.hideLoading();
      mapFeatures.forEach(function (v) {
        // 地区名称
        var name = v.properties.name; // 地区经纬度
        geoCoordMap[name] = v.properties.cp;
      });
      var data = [];

      data = this.mapData;

      var max = 480,
        min = 9;

      var maxSize4Pin = 100,
        minSize4Pin = 20;
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              count: data[i].count,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        console.log(geoCoord);
        return res;
      };
      window.onresize = myChart.resize;
      myChart.setOption({
        // 进行相关配置
        backgroundColor: "transparent",
        tooltip: {
          trigger: "item",
          backgroundColor: "#1540a1",
          borderColor: "#FFFFCC",
          showDelay: 0,
          hideDelay: 0,
          enterable: false,
          transitionDuration: 0,
          extraCssText: "z-index:100",
          formatter: function (params, ticket, callback) {
            // if (ticket.indexOf('散点') != -1) {
            let index = params.dataIndex;
            console.log(_this.mapData);
            let name = params.name;
            var tipHtml = "";
            tipHtml =
              '<div style="width:280px;height:200px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">' +
              '<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">' +
              '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">' +
              "</i>" +
              '<span style="margin-left:10px;color:#fff;font-size:16px;">' +
              name +
              "</span>" +
              "</div>" +
              '<div style="padding:20px">' +
              '<p style="color:#fff;font-size:12px;">' +
              '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
              "</i>" +
              "订单数：" +
              '<span style="color:#f48225;margin:0 6px;">' +
              _this.mapData[index].count +
              "</span>" +
              "笔" +
              "</p>" +
              '<p style="color:#fff;font-size:12px;">' +
              '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
              "</i>" +
              "销售金额：" +
              '<span style="color:#f48225;margin:0 6px;">' +
              _this.mapData[index].good +
              "</span>" +
              "元" +
              "</p>" +
              '<p style="color:#fff;font-size:12px;">' +
              '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
              "</i>" +
              "销售占比：" +
              '<span style="color:#f48225;margin:0 6px;">' +
              _this.mapData[index].bad +
              "</span>" +
              // "个" +
              "</p>" +
              "</div>" +
              "</div>";
            return tipHtml;
            // }
          },
        },
        visualMap: {
          show: false,
          min: 0,
          max: 200,
          left: "10%",
          top: "bottom",
          calculable: false,
          seriesIndex: [1],
          inRange: {
            color: ["#04387b", "#467bc0"],
          },
        },
        geo: {
          map: mapName,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: true,
            },
            color: "#fff",
          },
          roam: true,
          zoom: 0.6,
          scaleLimit: {
            //所属组件的z分层，z值小的图形会被z值大的图形覆盖
            min: 0.6, //最小的缩放值
          },
          layoutCenter: ["50%", "50%"], //地图位置
          layoutSize: "180%",
          itemStyle: {
            normal: {
              areaColor: "#0083ce", //地图颜色
              borderColor: "#0066ba", //省份边界颜色
            },
            emphasis: {
              borderColor: "#0066ba", //选中省份边界颜色
              areaColor: "#0494e1", //选中省份颜色
              shadowColor: "rgba(0, 0, 0, 0.4)", //选中省份投影
              shadowBlur: 10,
            },
          },
        },
        series: [
          {
            name: "散点",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(this.mapData),
            rippleEffect: {
              //涟漪特效
              period: 4, //动画时间，值越小速度越快
              brushType: "stroke", //波纹绘制方式 stroke, fill
              scale: 4, //波纹圆环最大限制，值越大波纹越大
            },
            hoverAnimation: true,
            symbolSize: 5,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "#fff",
              },
            },
          },
          {
            name: "散点",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(
              this.mapData
                .sort(function (a, b) {
                  return b.count - a.count;
                })
                .slice(0, 5)
            ),
            symbolSize: 8,
            showEffectOn: "render",
            rippleEffect: {
              //涟漪特效
              period: 3, //动画时间，值越小速度越快
              brushType: "stroke", //波纹绘制方式 stroke, fill
              scale: 4, //波纹圆环最大限制，值越大波纹越大
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "left",
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "yellow",
                shadowBlur: 10,
                shadowColor: "yellow",
              },
            },
            zlevel: 1,
          },
        ],
      });
    },
    //匹配品类
    getselectKeyWordList(key) {
      selectAllFirstThreeList({
        inputValue: key,
        grade: this.productView,
      }).then((response) => {
        this.libraryOptions = response.sort((a, b) => a.length - b.length);
      });
    },
    //添加库存名称
    addLibraryIdList() {
      if (this.formData.libraryIdList.length > 4) {
        this.$modal.msgError("请选择不超过5个品类");
        return;
      }
      if (this.formData.libraryIdList.length > 0) {
        let hasValue = false;
        for (let i = 0; i < this.formData.libraryIdList.length; i++) {
          if (!this.formData.libraryIdList[i].id) {
            hasValue = true;
            break;
          }
        }
        if (hasValue) {
          return this.$message.warning("请先选择未选择项");
        }
        this.formData.libraryIdList.push({ id: "" });
      }
    },
    //库存名称删除
    delRow(item, index) {
      if (this.formData.libraryIdList.length > 1) {
        this.formData.libraryIdList.splice(index, 1);
        // this.$forceUpdate;
        const E = echarts.init(this.$refs.echarts);
        E.dispose();
      } else {
        this.$message.warning("至少选择一项");
      }
    },
    //匹配曲线指标
    get_item_name_by_en_name(en_name) {
      let res = "销售金额";

      let relation = {
        salesAmount: "销售金额",
        returnAmount: "退款金额",
        // "factory_order":
        salesGrossProfit: "采购在途",
        saleDays: "可售天数",

        netSalesAmount: "净销售额",
        totalSalesNumber: "总销售件数",
        netSalesNumber: "净销售件数",
        returnBeforeShipmentNumber: "发货前退货件数",
        returnAfterShipmentNumber: "发货后退货件数",
        totalReturnNumber: "总退货件数",
        comprehensiveReturnRate: "综合退货率",
        grossProfit: "毛利额",
        grossProfitRate: "毛利率",
        endingInventory: "库存",
        exhaustionRate: "售罄率",
        sdNumber: "SD单件数",
        mjxNumber: "MJX单件数",
      };

      if (relation.hasOwnProperty(en_name)) {
        res = relation[en_name];
      }

      return res;
    },

    keywordListlength(type) {
      // this.selectKeyWordStatisticsEchartsII();
      console.log(JSON.stringify(type));
      console.log(JSON.stringify(this.formData.libraryIdList));
      var m = [];
      this.formData.libraryIdList.forEach((item) => {
        m.push(item.id);
        // if (item.id == type) {
        //   this.$modal.msgError("你输入的品类重复，请重新输入");
        // }
      });
      let filteredArray = m.filter(function (item) {
        return item === type;
      });

      if (filteredArray.length > 1) {
        this.$modal.msgError("你输入的品类重复，请重新输入");
      }
    },
    //品类
    goodstableEdit(row, column, cell, event) {
      if (
        column.property == "endingInventory" ||
        column.property == "salesGrossProfit"
      ) {
        return;
      }
      this.queryParams.property = column.property;
      if (event.ctrlKey) {
        //如果ctr1按下就让他按下的标识符变为true
        var m = [];
        this.formData.libraryIdList.forEach((item) => {
          if (item.id == "") {
            this.formData.libraryIdList.splice(0, 1);
          }
          m.push(item.id);
        });
        if (this.formData.libraryIdList.length > 4) {
          this.$modal.msgError("请选择不超过5个品类");
          return;
        }
        let filteredArray = m.filter(function (item) {
          // if (row.sourceName) {
          //   return item == row.sourceName;
          // } else {
          //   return item == row.label;
          // }
          return item == row.itemGrade;
        });

        if (filteredArray.length > 0) {
          this.$modal.msgError("你选择的品类重复，请重新选择");
          return;
        } else {
          this.formData.libraryIdList.push({ id: row.itemGrade });
        }
      }
      this.selectFirstStatisticsEchartsII();
    },
    //价格带
    pricetableEdit(row, column, cell, event) {
      //请求前初始化
      const Raddar = echarts.init(this.$refs.Raddar);
      // Raddar.dispose();
      // let list = [];
      let note = [];
      if (event.ctrlKey) {
        //如果ctr1按下就让他按下的标识符变为true
        var m = [];
        this.list.forEach((item) => {
          m.push(item.itemGrade);
        });
        let filteredArray = m.filter(function (item) {
          // if (row.sourceName) {
          //   return item == row.sourceName;
          // } else {
          //   return item == row.label;
          // }
          return item == row.itemGrade;
        });

        if (filteredArray.length > 0) {
          this.$modal.msgError("你选择的品类重复，请重新选择");
          return;
        } else {
          this.list.push(row);
        }
      }
      const keyArray = this.list.map((item) => item.itemGrade);

      this.list.forEach((item, index) => {
        note.push({
          name: item.itemGrade,
          type: "bar",
          // step: "start",
          data: [
            item.firstPriceRangeNum,
            item.secondPriceRangeNum,
            item.thirdPriceRangeNum,
            item.fourthPriceRangeNum,
            item.fifthPriceRangeNum,
            item.sixthPriceRangeNum,
            item.seventhPriceRangeNum,
            item.eighthPriceRangeNum,
            // `${person.firstPriceRangeNum}, ${person.secondPriceRangeNum},${person.thirdPriceRangeNum}, ${person.fourthPriceRangeNum},${person.fifthPriceRangeNum}, ${person.sixthPriceRangeNum},${person.seventhPriceRangeNum}, ${person.eighthPriceRangeNum}`,
          ],
          // date: item.itemGrade,
          // firstPriceRangeNum: item.firstPriceRangeNum,
          // secondPriceRangeNum: item.secondPriceRangeNum,
          // thirdPriceRangeNum: item.thirdPriceRangeNum,
          // fourthPriceRangeNum: item.fourthPriceRangeNum,
          // fifthPriceRangeNum: item.fifthPriceRangeNum,
          // sixthPriceRangeNum: item.sixthPriceRangeNum,
          // seventhPriceRangeNum: item.seventhPriceRangeNum,
          // eighthPriceRangeNum: item.eighthPriceRangeNum,
        });
      });
      console.log(JSON.stringify(note));

      const option = {
        grid: {
          left: "0",
          top: "10%",
          right: "2%",
          bottom: "10%",
        },
        // 提示框
        tooltip: { trigger: "axis" },
        xAxis: {
          type: "category",
          data: [
            "100以下",
            "[100,150)",
            "[150,200)",
            "[200,250)",
            "[250,300)",
            "[300,350)",
            "[350,400)",
            "400以上",
          ],
        },
        yAxis: { type: "value" },
        legend: {
          data: keyArray,
        },
        series: note,
      };

      // this.echartData.order.xData = xData;
      // this.echartData.order.series = series;
      // const Raddar = echarts.init(this.$refs.Raddar);

      Raddar.setOption(option);
    },
    //多对一指标点击回传
    handleSetItemChartData(type) {
      console.log(JSON.stringify(type));

      this.queryParams.property = type;
      this.selectFirstStatisticsEchartsII();
    },
    //曲线分析
    selectFirstStatisticsEchartsII() {
      const E = echarts.init(this.$refs.echarts);
      E.dispose();
      if (!this.formData.libraryIdList[0].id) {
        // console.log(555555);
        // this.$modal.msgError("请选择品类");
        return;
      }
      // console.log(JSON.stringify(this.formData.libraryIdList));
      const input = [];
      this.formData.libraryIdList.forEach((item) => {
        input.push(item.id);
      });
      // this.queryParams.keyWords = input.join();
      let obj = {
        dataS: input.join(),
        itemType: this.productView,
        property: this.queryParams.property,
        salesGrade: this.value.join(","),
        ...this.timeObj,
      };

      selectFirstStatistics(obj).then((response) => {
        console.log(JSON.stringify(response));

        let order = { date: [], data: [] };
        order.date = response.map((item) => item.dataDateUnit);
        response.forEach((item) => {
          order.data.push(item.keywordProperty);
        });
        const xData = order.date;

        console.log(JSON.stringify(order.data));
        const keyArray = Object.keys(order.data[0]);
        const series = [];
        keyArray.forEach((key) => {
          series.push({
            name: key,
            data: order.data.map((item) => item[key]),
            type: "line",
          });
        });

        // let tooltip = {};
        // if (this.queryParams.property == "payConversionRate") {
        //   tooltip = {
        //     trigger: "axis",
        //     formatter: "{c}%",
        //   };
        // } else {
        //   tooltip = {
        //     trigger: "axis",
        //   };
        // }

        const option = {
          grid: {
            left: "5%",
            top: "10%",
            right: "2%",
            bottom: "10%",
          },
          // 提示框
          tooltip: { trigger: "axis" },
          xAxis: {
            data: xData,
          },
          yAxis: {},
          legend: {
            data: keyArray,
          },
          series,
        };

        // this.echartData.order.xData = xData;
        // this.echartData.order.series = series;

        const E = echarts.init(this.$refs.echarts);

        E.setOption(option);
        // E.dispose();
        // E.resize();
        // if (
        //   // this.queryParams.property == "payConversionRate" ||
        //   this.queryParams.property == "orderConversionRate"
        // ) {
        //   E.setOption(optionEcharts);
        // } else {
        //   E.setOption(option);
        // }
      });
    },
    //锚点
    scrollToSection(index) {
      const target = this.sections[index];
      // console.log(JSON.stringify(index));
      //     return
      this.active = index;
      if (target) {
        this.$nextTick(() => {
          target.scrollIntoView({ behavior: "smooth" });
          this.activeSection = target;
        });
      }
    },
    //锚点
    startScrollTimer() {
      this.scrollTimer = setInterval(() => {
        const currentSection = document.querySelector("section[data-active]");
        if (currentSection !== this.activeSection) {
          this.activeSection = currentSection;
        } else {
          clearInterval(this.scrollTimer);
        }
      }, 100); // 每100毫秒检查一次滚动位置是否变化
    },
    //锚点高亮
    isActiveSection(sectionId) {
      // 检查当前导航项是否处于高亮状态
      return this.active === sectionId;
    },

    //客件数
    getnumberOfItem(param) {
      numberOfItem(param).then((response) => {
        this.biNumberOfItem = response.biNumberOfItem;
        console.log(response);
      });
    },

    get_chinese_name_by_en_name(en_name) {
      let res = "总库存";
      let relation = {
        totalStockAmount: "库存总金额",
        productStockAmount: "产品库存总金额",

        accessoriesStockAmount: "配件库存总金额",
        totalStock: "总库存",
        productStock: "产品库存",
        accessoriesStock: "配件库存",
        totalStockRotationRate: "库存周转率",
        productStockRotationRate: "产品库存周转率",
        accessoriesStockRotationRate: "配件库存周转率",
        // grossProfit: "毛利额",
        // grossProfitRate: "毛利率",
        // endingInventory: "期末库存",
        // exhaustionRate: "售罄率",
        // sdNumber: "SD单件数",
        // mjxNumber: "MJX单件数",
      };

      if (relation.hasOwnProperty(en_name)) {
        res = relation[en_name];
      }

      return res;
    },
    shopInventorytableEdit(row, column, cell, event) {
      if (!column) {
        // column.property = column[3].property;
        return;
      }
      //饼图
      let list = [];

      this.shopInventoryTopList.forEach((item) => {
        console.log(JSON.stringify([column.property]));
        list.push({
          name: item.shop,
          // value: item.totalStock,
          value: item[column.property],
        });
      });

      this.shoptotalStock = echarts.init(this.$refs.shoptotalStock, "macarons");
      this.shoptotalStock.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          left: "center",
          bottom: "10",
          data: [this.get_chinese_name_by_en_name(column.property)],
        },
        series: [
          {
            name: this.get_chinese_name_by_en_name(column.property),
            type: "pie",
            // roseType: "radius",
            radius: [15, 95],
            center: ["50%", "38%"],
            data: list,
            animationEasing: "cubicInOut",
            animationDuration: 1000,
          },
        ],
      });
    },
    //店铺库存Top
    shopInventoryTop(obj) {
      getshopInventoryTop(obj).then((response) => {
        // console.log(JSON.stringify(response));
        if (response) {
          this.shopInventoryTopList = response ? response : [];

          //饼图
          let list = [];

          response.forEach((item) => {
            list.push({
              name: item.shop,
              value: item.totalStock,
            });
          });

          this.shoptotalStock = echarts.init(
            this.$refs.shoptotalStock,
            "macarons"
          );
          this.shoptotalStock.setOption({
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            legend: {
              left: "center",
              bottom: "10",
              data: ["总库存"],
            },
            series: [
              {
                name: "总库存",
                type: "pie",
                // roseType: "radius",
                radius: [15, 95],
                center: ["50%", "38%"],
                data: list,
                animationEasing: "cubicInOut",
                animationDuration: 1000,
                //百分比
                label: {
                  normal: {
                    show: true,
                    formatter: "{b}({d}%)", //自定义显示格式(b:name, c:value, d:百分比)
                  },
                },
              },
            ],
          });
        }
      });
    },
    //渠道库存比例图
    channelInventorytableEdit(row, column, cell, event) {
      if (!column) {
        // column.property = column[3].property;
        return;
      }
      //饼图
      let list = [];

      this.channelInventoryTopList.forEach((item) => {
        console.log(JSON.stringify([column.property]));
        list.push({
          name: item.channel,
          // value: item.totalStock,
          value: item[column.property],
        });
      });

      this.totalStock = echarts.init(this.$refs.totalStock, "macarons");
      this.totalStock.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          left: "center",
          bottom: "10",
          data: [this.get_chinese_name_by_en_name(column.property)],
        },
        series: [
          {
            name: this.get_chinese_name_by_en_name(column.property),
            type: "pie",
            // roseType: "radius",
            radius: [15, 95],
            center: ["50%", "38%"],
            data: list,
            animationEasing: "cubicInOut",
            animationDuration: 1000,
          },
        ],
      });
    },
    //渠道库存Top
    channelInventoryTop(obj) {
      getchannelInventoryTop(obj).then((response) => {
        // console.log(JSON.stringify(response));
        if (response) {
          this.channelInventoryTopList = response ? response : [];
          // return;

          //饼图
          let list = [];
          response.forEach((item) => {
            list.push({
              name: item.channel,
              value: item.totalStock,
            });
          });

          this.totalStock = echarts.init(this.$refs.totalStock, "macarons");
          this.totalStock.setOption({
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            legend: {
              left: "center",
              bottom: "10",
              data: ["总库存"],
            },

            series: [
              {
                name: "总库存",
                type: "pie",
                // roseType: "radius",
                radius: [15, 95],
                center: ["50%", "38%"],
                data: list,
                animationEasing: "cubicInOut",
                animationDuration: 1000,
                //百分比
                label: {
                  normal: {
                    show: true,
                    formatter: "{b}({d}%)", //自定义显示格式(b:name, c:value, d:百分比)
                  },
                },
              },
            ],
          });
        }
      });
    },
    //渠道SaleTop
    getchannelSaleTop(obj) {
      channelSaleTop(obj).then((response) => {
        // console.log(JSON.stringify(response));
        if (response) {
          this.channelSaleTopList = response ? response : [];

          //饼图
          let list = [];
          response.forEach((item) => {
            list.push({
              name:
                item.channel + "(" + (item.amountRatio * 100).toFixed(2) + "%)",
              value: item.salesAmount,
            });
          });

          this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons");
          this.usedmemory.setOption({
            tooltip: {
              trigger: "item",
              // ({d}%)
              formatter: "{a} <br/>{b} : {c} ",
            },
            series: [
              {
                name: "销售金额",
                type: "pie",
                // roseType: "radius",
                radius: [15, 95],
                center: ["50%", "38%"],
                data: list,
                animationEasing: "cubicInOut",
                animationDuration: 1000,
              },
            ],
          });
        }
      });
    },

    //店铺SaleTop
    getshopSaleTop(obj) {
      shopSaleTop(obj).then((response) => {
        // console.log(JSON.stringify(response));
        if (response) {
          this.shopSaleTopList = response ? response : [];

          //饼图
          let list = [];
          response.forEach((item) => {
            list.push({
              name:
                item.shop + "(" + (item.amountRatio * 100).toFixed(2) + "%)",
              value: item.salesAmount,
            });
          });

          this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
          this.commandstats.setOption({
            tooltip: {
              trigger: "item",
              // ({d}%)
              formatter: "{a} <br/>{b} : {c} ",
            },
            series: [
              {
                name: "销售金额",
                type: "pie",
                // roseType: "radius",

                radius: [15, 95],
                center: ["50%", "38%"],
                data: list,
                animationEasing: "cubicInOut",
                animationDuration: 1000,
              },
            ],
          });
        }
      });
    },
    //销售指标
    getselectSaleSingle(obj) {
      selectSaleSingle(obj).then((response) => {
        // console.log(JSON.stringify(response));
        if (response) {
          this.biNumberItem = response;
        }
      });
    },
    //库存指标
    getselectSkuSingle(obj) {
      selectInventoryData(obj).then((response) => {
        // console.log(1111111);
        if (response) {
          this.biNumberSku = response;
          console.log(JSON.stringify(this.biNumberSku));
        }
      });
    },

    //库存曲线
    getechartSkuData(obj) {
      selectInvStatistics(obj).then((response) => {
        var row = [];
        response.forEach((item) => {
          row.push({
            支付日期: item.stockDate,
            产品库存: item.productStock,
            配件库存: item.accessoriesStock,
            库存总量: item.totalStock,
            产品库存总金额: item.productStockAmount,
            配件库存总金额: item.accessoriesStockAmount,
            库存总金额: item.totalStockAmount,
            产品库存周转率: item.productStockRotationRate,
            配件库存周转率: item.accessoriesStockRotationRate,
            库存周转率: item.totalStockRotationRate,
            // 订单数量: item.totalOrdersNumber,
            // 商品销售件数: item.totalSoldNumber,
            // 销售毛利: item.salesGrossProfit,
            // 连带率: item.jointSeveralRate,
          });
        });
        // console.log(JSON.stringify(response));

        this.echartDataSku.rows = row;

        // this.echartData.rows = row
      });
    },

    //曲线
    getechartChannelData(obj) {
      selectChannelStatistics(obj).then((response) => {
        var row = [];
        response.forEach((item) => {
          row.push({
            支付日期: item.payDateUnit,
            销售金额: item.salesAmount,
            退款金额: item.returnAmount,
            净销售额: item.netSalesAmount,
            综合退货率: item.comprehensiveReturnRate * 0.01,
            发货前退货率: item.returnBeforeShipmentRate * 0.01,
            发货后退货率: item.returnAfterShipmentRate * 0.01,
            订单数量: item.totalOrdersNumber,
            商品销售件数: item.totalSoldNumber,
            销售毛利: item.salesGrossProfit,
            连带率: item.jointSeveralRate * 0.01,
            客单价: item.customerUnitPrice,
            货单价: item.unitPrice,

            商品货单价: item.unitPriceGoods,
            配件货单价: item.accessoriesUnitPrice,
            商品均售成本: item.averageCostSales,
            平均销售毛利率: item.averageSalesGrossProfit * 0.01,
            商品平均折扣率: item.averageDiscountRateGoods * 0.01,

            赠品配件数: item.complimentaryAccessoriesNumber,
            配件销售数量: item.salesAccessoriesNumber,

            配件成本比率: item.accessoriesCostRate,
            配件耗量比率: item.accessoriesConsumptionRate,

            // "总销售件数": item.totalSalesNumber,
            // "发货前退货件数": item.returnBeforeShipmentNumber,
          });
        });
        // console.log(JSON.stringify(response));

        this.echartData.rows = row;

        // this.echartData.rows = row
      });
    },
    //指标点击回传
    handleSetLineSkuData(type) {
      // console.log(JSON.stringify(type));
      if (this.highlightedSku.includes(type)) {
        return;
      }
      // 移除旧的高亮元素
      this.highlightedSku.shift();
      // // 添加新的高亮元素
      this.highlightedSku.push(type);

      console.log(JSON.stringify(this.highlightedSku));
      var arr = ["支付日期"];
      // let temp = arr.concat(this.highlightedSku);
      // // let temp = arr.push(type)
      // console.log(JSON.stringify(temp));
      // this.echartDataSku.columns = temp;
      let array = arr.concat(this.highlightedSku);
      // let temp = arr.push(type)
      // console.log(JSON.stringify(temp));
      // var array = ["支付日期", "退款金额", "净销售额", "毛利率"];
      var rateItem;

      // 遍历数组，找到包含'率'字的元素
      for (var i = 0; i < array.length; i++) {
        if (array[i].includes("率")) {
          rateItem = array[i];
          break;
        }
      }

      // 如果找到了包含'率'字的元素，将其移到数组最后
      if (rateItem) {
        var index = array.indexOf(rateItem);
        if (index !== array.length - 1) {
          array.splice(index, 1);
          array.push(rateItem);
        }
      }

      console.log(array);
      this.echartDataSku.columns = array;
    },
    //指标点击回传
    handleSetLineChartData(type) {
      // console.log(JSON.stringify(type));
      if (this.highlighted.includes(type)) {
        return;
      }
      // 移除旧的高亮元素
      this.highlighted.shift();
      // // 添加新的高亮元素
      this.highlighted.push(type);

      console.log(JSON.stringify(this.highlighted));
      var arr = ["支付日期"];
      let array = arr.concat(this.highlighted);
      // let temp = arr.push(type)
      // console.log(JSON.stringify(temp));
      // var array = ["支付日期", "退款金额", "净销售额", "毛利率"];
      var rateItem;

      // 遍历数组，找到包含'率'字的元素
      for (var i = 0; i < array.length; i++) {
        if (array[i].includes("率")) {
          rateItem = array[i];
          break;
        }
      }

      // 如果找到了包含'率'字的元素，将其移到数组最后
      if (rateItem) {
        var index = array.indexOf(rateItem);
        if (index !== array.length - 1) {
          array.splice(index, 1);
          array.push(rateItem);
        }
      }

      console.log(array);
      this.echartData.columns = array;
    },
    //店铺控件
    handleChange(val) {
      console.log(JSON.stringify(val));

      // var lastElement = val.pop();
      // this.shopName = lastElement

      // console.log(this.dayActive);
      if (this.cascadeList.length < 1) {
        return;
      }
      let obj = { salesGrade: this.value.join(","), ...this.timeObj };
      console.log(JSON.stringify(obj));

      if (!obj.endTime) {
        return;
      } else if (obj.dateType == "date" || obj.dateType == "daterange") {
        // console.log("库存接口");

        //曲线
        this.getechartChannelData(obj);
        //销售指标
        this.getselectSaleSingle(obj);
        //渠道SaleTop
        this.getchannelSaleTop(obj);
        //店铺SaleTop
        this.getshopSaleTop(obj);
        //sku曲线
        this.getechartSkuData(obj);
        //sku指标
        this.getselectSkuSingle(obj);
        //商品排行Top
        this.changeView();
      } else {
        //曲线
        this.getechartChannelData(obj);
        //销售指标
        this.getselectSaleSingle(obj);
        //渠道SaleTop
        this.getchannelSaleTop(obj);
        //店铺SaleTop
        this.getshopSaleTop(obj);
        //商品排行Top
        this.changeView();
      }
      let param = {
        dataSource: this.value,
        startTime: this.dateFormat(this.timeObj.startTime),
        endTime: this.dateFormat(this.timeObj.endTime),
        dataType: this.groupType,
      };
      console.log(JSON.stringify(param));
      if (!param.endTime) {
        return;
      } else {
        // this.getechartChannelData(obj)
        this.getnumberOfItem(param);
        this.getTopSal(param);
      }
    },
    //选完时间后发请求
    handleChangeTime(timeObj) {
      // console.log(type)
      // console.log(timeObj)
      // TODO
      this.timeObj = timeObj;
      if (this.cascadeList.length < 1) {
        return;
      }
      let param = {
        dataSource: this.value,
        startTime: this.dateFormat(timeObj.startTime),
        endTime: this.dateFormat(timeObj.endTime),
        dataType: this.groupType,
      };
      console.log(JSON.stringify(param));
      if (!param.endTime) {
        return;
      } else {
        // this.getechartChannelData(obj)
        //客件数
        this.getnumberOfItem(param);
        //地区Top20
        this.getTopSal(param);
      }
      console.log(JSON.stringify(this.timeObj));
      let obj = { salesGrade: this.value.join(","), ...timeObj };

      console.log(JSON.stringify(obj));

      if (!obj.endTime) {
        return;
      } else if (obj.dateType == "date" || obj.dateType == "daterange") {
        // console.log("库存接口");
        //渠道库存Top
        this.channelInventoryTop(obj);
        //店铺库存Top
        this.shopInventoryTop(obj);
        //曲线
        this.getechartChannelData(obj);
        //销售指标
        this.getselectSaleSingle(obj);
        //渠道SaleTop
        this.getchannelSaleTop(obj);
        //店铺SaleTop
        this.getshopSaleTop(obj);
        //sku曲线
        this.getechartSkuData(obj);
        //sku指标
        this.getselectSkuSingle(obj);
        //商品排行Top
        this.changeView();
      } else {
        //渠道库存Top
        this.channelInventoryTop(obj);
        //店铺库存Top
        this.shopInventoryTop(obj);
        //曲线
        this.getechartChannelData(obj);
        //销售指标
        this.getselectSaleSingle(obj);
        //渠道SaleTop
        this.getchannelSaleTop(obj);
        //店铺SaleTop
        this.getshopSaleTop(obj);
        //商品排行Top
        this.changeView();
      }
    },
    //分页
    //售罄时间定义
    changePage() {
      if (this.cascadeList.length < 1) {
        return;
      }
      //请求数据
      let obj = {
        salesGrade: this.value.join(","),
        ...this.timeObj,
        itemType: this.productView,
        dataType: this.groupType,
        ...this.queryParams,
        ...this.timeGapRate,
      };
      firstThreeScreenRank(obj).then((response) => {
        this.ItemDateList = response.rows;
        this.total = response.total;
      });
    },
    //视图角度
    changeView(val) {
      //请求前初始化
      // const Raddar = echarts.init(this.$refs.Raddar);
      // Raddar.dispose();

      this.formData = {
        libraryIdList: [{ id: "" }],
      };
      //请求数据
      let obj = {
        salesGrade: this.value.join(","),
        ...this.timeObj,
        itemType: this.productView,
        dataType: this.groupType,
        ...this.queryParams,
        ...this.timeGapRate,
      };
      firstThreeScreenRank(obj).then((response) => {
        this.ItemDateList = response.rows;
        this.total = response.total;

        // || this.productView == "三级"
        if (response.total == 0) {
          const E = echarts.init(this.$refs.echarts);
          E.dispose();
        } else {
          // this.radarData.rows = response.rows.slice(0, 2);
          let note = [];
          const keyArray = response.rows.map((item) => item.itemGrade);

          response.rows.forEach((item, index) => {
            if (index > 2) {
              return;
            }
            //多对一
            this.formData.libraryIdList.forEach((person) => {
              if (person.id == "") {
                this.formData.libraryIdList.splice(0, 1);
              }
              // m.push(item.id);
            });
            this.formData.libraryIdList.push({ id: item.itemGrade });

            //
            note.push({
              name: item.itemGrade,
              type: "bar",
              // step: "start",
              data: [
                item.firstPriceRangeNum,
                item.secondPriceRangeNum,
                item.thirdPriceRangeNum,
                item.fourthPriceRangeNum,
                item.fifthPriceRangeNum,
                item.sixthPriceRangeNum,
                item.seventhPriceRangeNum,
                item.eighthPriceRangeNum,
                // `${person.firstPriceRangeNum}, ${person.secondPriceRangeNum},${person.thirdPriceRangeNum}, ${person.fourthPriceRangeNum},${person.fifthPriceRangeNum}, ${person.sixthPriceRangeNum},${person.seventhPriceRangeNum}, ${person.eighthPriceRangeNum}`,
              ],
              // date: item.itemGrade,
              // firstPriceRangeNum: item.firstPriceRangeNum,
              // secondPriceRangeNum: item.secondPriceRangeNum,
              // thirdPriceRangeNum: item.thirdPriceRangeNum,
              // fourthPriceRangeNum: item.fourthPriceRangeNum,
              // fifthPriceRangeNum: item.fifthPriceRangeNum,
              // sixthPriceRangeNum: item.sixthPriceRangeNum,
              // seventhPriceRangeNum: item.seventhPriceRangeNum,
              // eighthPriceRangeNum: item.eighthPriceRangeNum,
            });
          });
          console.log(JSON.stringify(note));

          const option = {
            grid: {
              left: "5%",
              top: "10%",
              right: "3%",
              bottom: "10%",
            },
            // 提示框
            tooltip: { trigger: "axis" },
            xAxis: {
              type: "category",
              data: [
                "100以下",
                "[100,150)",
                "[150,200)",
                "[200,250)",
                "[250,300)",
                "[300,350)",
                "[350,400)",
                "400以上",
              ],
            },
            yAxis: { type: "value" },
            legend: {
              data: keyArray,
            },
            series: note,
          };

          // this.echartData.order.xData = xData;
          // this.echartData.order.series = series;
          const Raddar = echarts.init(this.$refs.Raddar);

          Raddar.setOption(option);
        }
        this.selectFirstStatisticsEchartsII();

        // console.log(JSON.stringify(this.ItemDateList));
      });
    },
    //时间控件
    // changDay(val) {
    //   this.dayActive = val;
    //   this.timeGap.startTime = val[0];
    //   this.timeGap.endTime = val[1];
    // },
    // getDateArr(value) {
    //   this.timeGap.startTime = value[0];
    //   this.timeGap.endTime = value[1];
    //   console.log(JSON.stringify(this.dayActive));
    //   // console.log(JSON.stringify(this.timeGap));

    //   if (this.dayActive == 1 || this.dayActive == 7 || this.dayActive == 2) {
    //     console.log("不请求");
    //     const end = new Date();
    //     const start = new Date();
    //     // console.log(new Date(new Date() - 24 * 68 * 60 * 1000 * 30).toLocaleString());
    //     const newStart = this.dateFormat(
    //       start.setTime(start.getTime() - 86400000 * 30)
    //     );
    //     const newEnd = this.dateFormat(end.setTime(end.getTime() - 8.64e7));
    //     const queryParam = {
    //       shopName: this.value.slice(-1)[0],
    //       payDayStart: newStart,
    //       payDayEnd: newEnd,
    //     };
    //     console.log(JSON.stringify(queryParam));
    //   } else {
    //     var obj = {
    //       shopName: this.value.slice(-1)[0],
    //       payDayStart: this.timeGap.startTime,
    //       payDayEnd: this.timeGap.endTime,
    //     };
    //     console.log(JSON.stringify(obj));
    //     this.getBiList(obj);
    //   }
    //   this.dayActive = 1;
    // },
    // getBiList(obj) {
    //   this.loading = true;
    //   selectShopStatic(obj).then((response) => {
    //     console.log(JSON.stringify(response.rows));
    //     var row = [];
    //     response.rows.forEach((item) => {
    //       row.push({
    //         支付日期: item.payDay,
    //         销售金额: item.salesAmount,
    //         退款金额: item.returnAmount,
    //         净销售额: item.netSalesAmount,
    //         综合退货率: item.comprehensiveReturnRate * 0.01,
    //         发货前退货率: item.returnBeforeShipmentRate * 0.01,
    //         发货后退货率: item.returnAfterShipmentRate * 0.01,
    //         订单数量: item.totalOrdersNumber,
    //         商品销售件数: item.totalSoldNumber,
    //         销售毛利: item.salesGrossProfit,
    //         连带率: item.jointSeveralRateStr,
    //         客单价: item.customerUnitPriceStr,
    //         货单价: item.unitPriceStr,

    //         商品货单价: item.unitPriceGoodsStr,
    //         配件货单价: item.accessoriesUnitPriceStr,
    //         // "商品平均销售成本": item.unitPriceStr,
    //         平均销售毛利率: item.averageSalesGrossProfit * 0.01,
    //         商品平均折扣率: item.averageDiscountRateGoods * 0.01,

    //         赠品配件数: item.complimentaryAccessoriesNumber,
    //         销售配件数: item.salesAccessoriesNumber,

    //         配件成本比率: item.accessoriesCostRate,
    //         配件消耗量比率: item.accessoriesConsumptionRate,

    //         // "总销售件数": item.totalSalesNumber,
    //         // "发货前退货件数": item.returnBeforeShipmentNumber,
    //       });
    //     });
    //     console.log(JSON.stringify(row));

    //     this.echartData.rows = row;
    //     // this.BiShopSaleDwdList = response.rows;
    //     // this.total = response.total;
    //     this.loading = false;
    //   });
    // },
    // 时间格式转换
    dateFormat(date) {
      date = new Date(date);
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate() + "";
      return Y + M + D;
    },
    /** 查询品牌渠道店铺关系列表 */
    getdataSourceList() {
      listAllPermission().then((response) => {
        // response.rows = [
        //     { channel: '抖音', shopName: 'VFU抖一抖店-抖音', brand: 'VFU' },
        //     { channel: '抖音', shopName: 'VFU-抖音小店', brand: 'VFU' },
        //     { channel: '头条放心购', shopName: 'VFU-头条放心购', brand: 'VFU' },
        //     { channel: '拼多多', shopName: 'VFU-拼多多', brand: 'VFU' },
        //     { channel: '微信', shopName: 'VFU-微店', brand: 'VFU' },
        //     { channel: '微信', shopName: 'VFU-微信商城', brand: 'VFU' },
        //     { channel: '小红书', shopName: 'VFU-小红书', brand: 'VFU' },
        //     { channel: '严选', shopName: 'VFU-严寻合作', brand: 'VFU' },
        //     { channel: '天猫', shopName: 'VFU运动旗舰店', brand: 'VFU' },
        //     { channel: '京东', shopName: 'VFU运动旗舰店-京东', brand: 'VFU' }
        // ];
        // const result = [];

        let result = this.transformData(response);
        this.value = [result[0].label, result[0].children[0].label];
        this.cascadeList = result;
        this.handleChange();
      });
    },
    //店铺渠道品牌转换

    transformData(data) {
      let result = [];

      data.forEach((item) => {
        let brand = item.brand;
        let channel = item.channel;
        let shopName = item.shopName;

        // 如果brand在结果数组中不存在，则创建一个新的数组
        let brandIndex = result.findIndex(
          (brandObj) => brandObj.label === brand
        );
        if (brandIndex === -1) {
          result.push({
            disabled: true,
            label: brand,
            value: brand,
            children: [],
          });
          brandIndex = result.length - 1;
        }

        // 如果channel在当前brand的children数组中不存在，则创建一个新的数组
        let channelIndex = result[brandIndex].children.findIndex(
          (channelObj) => channelObj.label === channel
        );
        if (channelIndex === -1) {
          result[brandIndex].children.push({
            label: channel,
            value: channel,
            children: [],
          });
          channelIndex = result[brandIndex].children.length - 1;
        }

        // 如果shopName在当前channel的children数组中不存在，则创建一个新的数组
        let shopIndex = result[brandIndex].children[
          channelIndex
        ].children.findIndex((shopObj) => shopObj.label === shopName);
        if (shopIndex === -1) {
          result[brandIndex].children[channelIndex].children.push({
            label: shopName,
            value: shopName,
            // children: []
          });
        }
      });

      return result;
    },
    /** 查缓存询信息 */
    getList() {},
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载分析销售监控数据，请稍候！");
    },
    // 店铺销售排行导出
    shopSaleTopExport() {
      let obj = {
        salesGrade: this.value.join(","),
        ...this.timeObj,
      };
      this.download(
        "/product/BiAnalysis/shopSaleTopExport",
        {
          ...obj,
        },
        `shopSaleTopExport_${new Date().getTime()}.xlsx`
      );
    },
    /** 导出按钮操作 */
    handleExport() {
      let obj = {
        salesGrade: this.value.join(","),
        ...this.timeObj,
        ...this.queryParams,
        itemType: this.productView,
      };
      this.download(
        "/product/BiAnalysis/exportFirstThreeScreenRank",
        {
          ...obj,
        },
        `exportFirstThreeScreenRank_${new Date().getTime()}.xlsx`
      );
    },
    //地区Top20
    getTopSal(param) {
      TopSaleProvince(param).then((response) => {
        if (response.length > 0) {
          this.TopSallist = response;
          return;
          response.forEach((item) => {
            // { name: "武汉", number: 211, count: 1121, good: 964, bad: 157 },
            this.mapData.push({
              name: item.city,
              // number: item.orderCount,
              count: item.orderCount,
              good: item.salesAmount,
              bad: item.amountRatio,
            });
          });
          this.chinaConfigure();
          return;
          var MapChart = this.$echarts.init(this.$refs.MapChart);
          var data = [];
          this.TopSallist.forEach((item) => {
            // { name: "武汉", number: 211, count: 1121, good: 964, bad: 157 },
            this.mapData.push({
              name: item.city,
              // number: item.orderCount,
              count: item.orderCount,
              good: item.salesAmount,
              bad: item.amountRatio,
            });
            data.push({
              name: item.city,
              value: item.orderCount,
            });
          });

          var geoCoordMap = {
            海门: [121.15, 31.89],
            鄂尔多斯: [109.781327, 39.608266],
            招远: [120.38, 37.35],
            舟山: [122.207216, 29.985295],
            齐齐哈尔: [123.97, 47.33],
            盐城: [120.13, 33.38],
            赤峰: [118.87, 42.28],
            青岛: [120.33, 36.07],
            乳山: [121.52, 36.89],
            金昌: [102.188043, 38.520089],
            泉州: [118.58, 24.93],
            莱西: [120.53, 36.86],
            日照: [119.46, 35.42],
            胶南: [119.97, 35.88],
            南通: [121.05, 32.08],
            拉萨: [91.11, 29.97],
            云浮: [112.02, 22.93],
            梅州: [116.1, 24.55],
            文登: [122.05, 37.2],
            上海: [121.48, 31.22],
            攀枝花: [101.718637, 26.582347],
            威海: [122.1, 37.5],
            承德: [117.93, 40.97],
            厦门: [118.1, 24.46],
            汕尾: [115.375279, 22.786211],
            潮州: [116.63, 23.68],
            丹东: [124.37, 40.13],
            太仓: [121.1, 31.45],
            曲靖: [103.79, 25.51],
            烟台: [121.39, 37.52],
            福州: [119.3, 26.08],
            瓦房店: [121.979603, 39.627114],
            即墨: [120.45, 36.38],
            抚顺: [123.97, 41.97],
            玉溪: [102.52, 24.35],
            张家口: [114.87, 40.82],
            阳泉: [113.57, 37.85],
            莱州: [119.942327, 37.177017],
            湖州: [120.1, 30.86],
            汕头: [116.69, 23.39],
            昆山: [120.95, 31.39],
            宁波: [121.56, 29.86],
            湛江: [110.359377, 21.270708],
            揭阳: [116.35, 23.55],
            荣成: [122.41, 37.16],
            连云港: [119.16, 34.59],
            葫芦岛: [120.836932, 40.711052],
            常熟: [120.74, 31.64],
            东莞: [113.75, 23.04],
            河源: [114.68, 23.73],
            淮安: [119.15, 33.5],
            泰州: [119.9, 32.49],
            南宁: [108.33, 22.84],
            营口: [122.18, 40.65],
            惠州: [114.4, 23.09],
            江阴: [120.26, 31.91],
            蓬莱: [120.75, 37.8],
            韶关: [113.62, 24.84],
            嘉峪关: [98.289152, 39.77313],
            广州: [113.23, 23.16],
            延安: [109.47, 36.6],
            太原: [112.53, 37.87],
            清远: [113.01, 23.7],
            中山: [113.38, 22.52],
            昆明: [102.73, 25.04],
            寿光: [118.73, 36.86],
            盘锦: [122.070714, 41.119997],
            长治: [113.08, 36.18],
            深圳: [114.07, 22.62],
            珠海: [113.52, 22.3],
            宿迁: [118.3, 33.96],
            咸阳: [108.72, 34.36],
            铜川: [109.11, 35.09],
            平度: [119.97, 36.77],
            佛山: [113.11, 23.05],
            海口: [110.35, 20.02],
            江门: [113.06, 22.61],
            章丘: [117.53, 36.72],
            肇庆: [112.44, 23.05],
            大连: [121.62, 38.92],
            临汾: [111.5, 36.08],
            吴江: [120.63, 31.16],
            石嘴山: [106.39, 39.04],
            沈阳: [123.38, 41.8],
            苏州: [120.62, 31.32],
            茂名: [110.88, 21.68],
            嘉兴: [120.76, 30.77],
            长春: [125.35, 43.88],
            胶州: [120.03336, 36.264622],
            银川: [106.27, 38.47],
            张家港: [120.555821, 31.875428],
            三门峡: [111.19, 34.76],
            锦州: [121.15, 41.13],
            南昌: [115.89, 28.68],
            柳州: [109.4, 24.33],
            三亚: [109.511909, 18.252847],
            自贡: [104.778442, 29.33903],
            吉林: [126.57, 43.87],
            阳江: [111.95, 21.85],
            泸州: [105.39, 28.91],
            西宁: [101.74, 36.56],
            宜宾: [104.56, 29.77],
            呼和浩特: [111.65, 40.82],
            成都: [104.06, 30.67],
            大同: [113.3, 40.12],
            镇江: [119.44, 32.2],
            桂林: [110.28, 25.29],
            张家界: [110.479191, 29.117096],
            宜兴: [119.82, 31.36],
            北海: [109.12, 21.49],
            西安: [108.95, 34.27],
            金坛: [119.56, 31.74],
            东营: [118.49, 37.46],
            牡丹江: [129.58, 44.6],
            遵义: [106.9, 27.7],
            绍兴: [120.58, 30.01],
            扬州: [119.42, 32.39],
            常州: [119.95, 31.79],
            潍坊: [119.1, 36.62],
            重庆: [106.54, 29.59],
            台州: [121.420757, 28.656386],
            南京: [118.78, 32.04],
            滨州: [118.03, 37.36],
            贵阳: [106.71, 26.57],
            无锡: [120.29, 31.59],
            本溪: [123.73, 41.3],
            克拉玛依: [84.77, 45.59],
            渭南: [109.5, 34.52],
            马鞍山: [118.48, 31.56],
            宝鸡: [107.15, 34.38],
            焦作: [113.21, 35.24],
            句容: [119.16, 31.95],
            北京: [116.46, 39.92],
            徐州: [117.2, 34.26],
            衡水: [115.72, 37.72],
            包头: [110, 40.58],
            绵阳: [104.73, 31.48],
            乌鲁木齐: [87.68, 43.77],
            枣庄: [117.57, 34.86],
            杭州: [120.19, 30.26],
            淄博: [118.05, 36.78],
            鞍山: [122.85, 41.12],
            溧阳: [119.48, 31.43],
            库尔勒: [86.06, 41.68],
            安阳: [114.35, 36.1],
            开封: [114.35, 34.79],
            济南: [117, 36.65],
            德阳: [104.37, 31.13],
            温州: [120.65, 28.01],
            九江: [115.97, 29.71],
            邯郸: [114.47, 36.6],
            临安: [119.72, 30.23],
            兰州: [103.73, 36.03],
            沧州: [116.83, 38.33],
            临沂: [118.35, 35.05],
            南充: [106.110698, 30.837793],
            天津: [117.2, 39.13],
            富阳: [119.95, 30.07],
            泰安: [117.13, 36.18],
            诸暨: [120.23, 29.71],
            郑州: [113.65, 34.76],
            哈尔滨: [126.63, 45.75],
            聊城: [115.97, 36.45],
            芜湖: [118.38, 31.33],
            唐山: [118.02, 39.63],
            平顶山: [113.29, 33.75],
            邢台: [114.48, 37.05],
            德州: [116.29, 37.45],
            济宁: [116.59, 35.38],
            荆州: [112.239741, 30.335165],
            宜昌: [111.3, 30.7],
            义乌: [120.06, 29.32],
            丽水: [119.92, 28.45],
            洛阳: [112.44, 34.7],
            秦皇岛: [119.57, 39.95],
            株洲: [113.16, 27.83],
            石家庄: [114.48, 38.03],
            莱芜: [117.67, 36.19],
            常德: [111.69, 29.05],
            保定: [115.48, 38.85],
            湘潭: [112.91, 27.87],
            金华: [119.64, 29.12],
            岳阳: [113.09, 29.37],
            长沙: [113, 28.21],
            衢州: [118.88, 28.97],
            廊坊: [116.7, 39.53],
            菏泽: [115.480656, 35.23375],
            合肥: [117.27, 31.86],
            武汉: [114.31, 30.52],
            大庆: [125.03, 46.58],
          };

          var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
              var geoCoord = geoCoordMap[data[i].name];
              if (geoCoord) {
                res.push({
                  name: data[i].name,
                  value: geoCoord.concat(data[i].value),
                });
              }
            }
            return res;
          };

          var option = {
            title: {
              text: " 销售地区Top20",
              // subtext: "data from PM25.in",
              // sublink: "http://www.pm25.in",
              left: "center",
            },
            tooltip: {
              trigger: "item",
            },
            bmap: {
              center: [104.114129, 37.550339],
              zoom: 5,
              roam: true,
              mapStyle: {
                styleJson: [
                  {
                    featureType: "water",
                    elementType: "all",
                    stylers: {
                      color: "#d1d1d1",
                    },
                  },
                  {
                    featureType: "land",
                    elementType: "all",
                    stylers: {
                      color: "#f3f3f3",
                    },
                  },
                ],
              },
            },
            series: [
              {
                name: "pm2.5",
                type: "scatter",
                coordinateSystem: "bmap",
                data: convertData(data),
                symbolSize: function (val) {
                  return val[2] / 10;
                },
                encode: {
                  value: 2,
                },
                label: {
                  formatter: "{b}",
                  position: "right",
                  show: false,
                },
                emphasis: {
                  label: {
                    show: true,
                  },
                },
              },
              {
                name: "",
                type: "effectScatter",
                coordinateSystem: "bmap",
                data: convertData(
                  data
                    .sort(function (a, b) {
                      return b.value - a.value;
                    })
                    .slice(0, 21)
                ),
                symbolSize: function (val) {
                  return val[2] / 10;
                },
                encode: {
                  value: 2,
                },
                showEffectOn: "render",
                rippleEffect: {
                  brushType: "stroke",
                },
                hoverAnimation: true,
                label: {
                  formatter: "{b}",
                  position: "right",
                  show: true,
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: "#333",
                },
                zlevel: 1,
              },
            ],
          };
          MapChart.setOption(option);
          // MapChart.resize();

          // console.log(JSON.stringify(this.mapData));
          // this.chinaConfigure();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/* 移除默认的列表样式 */
ul {
  margin-top: 0.4%;
  list-style-type: none;
  /* 设置弹性布局，使列表项横向排列 */
  display: flex;
  /* 添加一些内边距和背景颜色 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置边框和圆角 */
  // border: 1px solid #ddd;
  border-radius: 5px;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

/* 设置列表项样式 */
li {
  /* 添加一些内边距和右边距 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置链接文本样式 */
  font-size: 15px;
  color: #bbb;
  text-decoration: none;
}

li.active a {
  // color: #f00;
  /* 高亮颜色 */
  color: #fff;
  background-color: #40c9c6;
}

// section {
//   margin-top: 60px;
// }

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
<style>
.el-scrollbar__wrap {
  /* overflow-x: hidden; */
  /* overflow-y: hidden; */
}
</style>

/** 商品平均销售毛利率 */ @Excel(name = "商品平均销售毛利率") private Double
averageSalesGrossProfit; /** 商品平均销售毛利率 2位数 */ private String
averageSalesGrossProfitStr; /** 商品日常售价总额 */ @Excel(name =
"商品日常售价总额") private Double dailySellingPrice; /** 商品平均折扣率 */
@Excel(name = "商品平均折扣率") private Double averageDiscountRateGoods; /**
商品平均折扣率 2位数*/ private String averageDiscountRateGoodsStr; /**
赠品配件数 */ @Excel(name = "赠品配件数") private Double
complimentaryAccessoriesNumber; /** 销售配件数 */ @Excel(name = "销售配件数")
private Integer salesAccessoriesNumber; /** 配件总消耗量 */ @Excel(name =
"配件总消耗量") private Double accessoriesTotalConsumption; private String
accessoriesTotalConsumptionStr; /** 配件总成本 */ @Excel(name = "配件总成本")
private Double accessoriesTotalCost; /** 配件成本比率 */ @Excel(name =
"配件成本比率") private Double accessoriesCostRate; /** 配件成本比率 2位数*/
private String accessoriesCostRateStr; /** 配件消耗量比率 */ @Excel(name =
"配件消耗量比率") private Double accessoriesConsumptionRate; private String
accessoriesConsumptionRateStr; /** 支付日期 */ @JsonFormat(pattern =
"yyyy-MM-dd") @Excel(name = "支付日期", width = 30, dateFormat = "yyyy-MM-dd")
private Date payDate; /** 支付日期-天 */ @JsonFormat(pattern = "yyyy-MM-dd")
@Excel(name = "支付日期-天", width = 30, dateFormat = "yyyy-MM-dd") private Date
payDay; /** 客单价 */ @Excel(name = "客单价") private Double customerUnitPrice;
/** 客单价 2位数 */ private String customerUnitPriceStr; /** 货单价 */
@Excel(name = "货单价") private Double unitPrice; /** 货单价 2位数 */ private
String unitPriceStr; /** 商品销售总成本 */ @Excel(name = "商品销售总成本")
private Double totalCostSales; /** 商品平均销售成本 */ @Excel(name =
"商品平均销售成本") private Double averageCostSales; /** 商品平均销售成本 2 位数
*/ private String averageCostSal /** 店铺销售明细ID */ private Long id; /**
店铺id */ @Excel(name = "店铺id") private String shopId; /** 店铺名称 */
@Excel(name = "店铺名称") private String shopName; /** 销售金额 */ @Excel(name =
"销售金额") private Double salesAmount; /** 退款金额 */ @Excel(name =
"退款金额") private Double returnAmount; /** 净销售额 */ @Excel(name =
"净销售额") private Double netSalesAmount; /** 总销售件数 */ @Excel(name =
"总销售件数") private Integer totalSalesNumber; /** 发货前退货数量 */
@Excel(name = "发货前退货数量") private Integer returnBeforeShipmentNumber; /**
发货前退货率*/ @Excel(name = "发货前退货率") private Double
returnBeforeShipmentRate; /** 发货前退货率 2 位*/ private String
returnBeforeShipmentRateStr; /** 发货后退货数量 */ @Excel(name =
"发货后退货数量") private Integer returnAfterShipmentNumber; /** 发货后退货率 */
@Excel(name = "发货后退货率") private Double returnAfterShipmentRate; /**
发货后退货率 保留2位 */ private String returnAfterShipmentRateStr; /**
总退货件数 */ @Excel(name = "总退货件数") private Integer totalReturnNumber; /**
综合退货率 */ @Excel(name = "综合退货率") private Double
comprehensiveReturnRate; /** 综合退货率 2位数*/ private String
comprehensiveReturnRateStr; /** 配件销售数 */ @Excel(name = "配件销售数")
private Integer accessoriesSalesNumber; /** 配件销售金额 */ @Excel(name =
"配件销售金额") private Double accessoriesSalesAmount; /** 配件货单价 */
@Excel(name = "配件货单价") private Double accessoriesUnitPrice; /** 配件货单价
2位数*/ private String accessoriesUnitPriceStr; /** 商品销售件数 */ @Excel(name
= "商品销售件数") private Integer totalSoldNumber; /** 商品销售总金额 */
@Excel(name = "商品销售总金额") private Integer totalSoldAmount; /** 商品货单价
*/ @Excel(name = "商品货单价") private Double unitPriceGoods; /** 商品货单价
2位数 */ private String unitPriceGoodsStr; /** 销售总毛利额 */ @Excel(name =
"销售总毛利额") private Double totalGrossProfitSales; /** 订单数量 */
@Excel(name = "订单数量") private Integer totalOrdersNumber; /** 销售总成本 */
@Excel(name = "销售总成本") private Double totalCostAmount; /** 销售毛利 */
@Excel(name = "销售毛利") private Integer salesGrossProfit; /** 连带率 */
@Excel(name = "连带率") private Double jointSeveralRate; /** 连带率2位数 */
private String jointSeveralRateStr; /** 客单价 */
